<template>
	<view class="container" style="padding:20rpx;" v-if="order&&order.snapshot">
		<view style="padding-bottom: 100rpx;">
			<view class="bg-white">
				<view class="section">
					<!-- store info begin -->
					<list-cell :hover="false">
						<view class="w-100 d-flex align-items-center">
							<view class="d-flex flex-column w-60">
								<view class="w-100 font-size-lg text-color-base text-truncate mb-10">
									{{ order.shop_name }}
								</view>
								<view class="w-100 d-flex align-items-center overflow-hidden">
									<image src="/static/images/order/location.png" class="flex-shrink-0"
										style="width: 30rpx; height: 30rpx;"></image>
									<view class="text-truncate font-size-sm text-color-assist">{{ order.shop_address }}
									</view>
								</view>
							</view>
							<view   class="d-flex justify-content-end align-items-center w-40">
								<image src="/static/images/order/mobile.png"
									style="width: 60rpx; height: 60rpx;margin-right: 30rpx;"></image>
								<image  src="/static/images/order/navigation.png" style="width: 60rpx; height: 60rpx;">
								</image>
							</view>
						</view>
					</list-cell>
					<!-- store info end -->
					<list-cell :hover="false" padding="50rpx 30rpx" v-show="order.status == '已支付'">
						<view class="w-100 d-flex flex-column">
							<view class="d-flex align-items-center just-content-center" >
								取餐码
							</view>
							<view class="d-flex align-items-center just-content-center">

								<view class="sort-num">{{ order.pickup_no }}</view>
							</view>
							<view
								class="d-flex just-content-center align-items-center font-size-base text-color-assist mb-40">
								请留意餐厅叫号,及时前往收银台取餐
							</view>
						</view>
					</list-cell>
					<list-cell :hover="false" padding="50rpx 30rpx" v-show="order.status == '未支付' && order.remaining>0">
						<view class="w-100 d-flex flex-column">
							<view class="d-flex align-items-center just-content-center">

							</view>
							<view class="d-flex align-items-center just-content-center">

								<view class="sort-num" style="font-size: 38rpx;color: #ADB838; ">待支付</view>
							</view>
							<view
								class="d-flex just-content-center align-items-center font-size-base text-color-assist mb-40">
								倒计时<u-count-down :timestamp="order.remaining" separator-color="#999"
									@change="timeEnd($event)" :show-hours="false" font-size="24"
									color="#999"></u-count-down>
							</view>
						</view>
					</list-cell>

					<list-cell :hover="false" padding="50rpx 30rpx"
						v-show="order.status == '未支付' && order.remaining==0">
						<view class="w-100 d-flex flex-column">
							<view class="d-flex align-items-center just-content-center">

							</view>
							<view class="d-flex align-items-center just-content-center">

								<view class="sort-num" style="font-size: 38rpx; color: #ADB838;">已取消</view>
							</view>
							<view
								class="d-flex just-content-center align-items-center font-size-base text-color-assist mb-40">
								订单已取消
							</view>
						</view>
					</list-cell>

					<list-cell :hover="false" padding="50rpx 30rpx" v-show="order.status == '已取消' ">
						<view class="w-100 d-flex flex-column">
							<view class="d-flex align-items-center just-content-center">

							</view>
							<view class="d-flex align-items-center just-content-center">

								<view class="sort-num" style="font-size: 38rpx; color: #ADB838;">已取消</view>
							</view>
							<view
								class="d-flex just-content-center align-items-center font-size-base text-color-assist mb-40">
								订单已取消
							</view>
						</view>
					</list-cell>
					<list-cell :hover="false" padding="50rpx 30rpx" v-show="order.status == '已退款' ">
						<view class="w-100 d-flex flex-column">
							<view class="d-flex align-items-center just-content-center">
					
							</view>
							<view class="d-flex align-items-center just-content-center">
					
								<view class="sort-num" style="font-size: 38rpx; color: #ADB838;">已退款</view>
							</view>
							<view
								class="d-flex just-content-center align-items-center font-size-base text-color-assist mb-40">
								订单已退款
							</view>
						</view>
					</list-cell>
					<view class="section" v-if="flag">
						<!-- payment and amount begin -->
						<list-cell :hover="false" padding="20rpx 10rpx">
							<view class="w-100 d-flex flex-column" @click="goLetter">
								<image style="width: 690rpx;" src="https://res.uxiao.vip/Utea/slog.png" mode="widthFix"></image>
							</view>
						</list-cell>
						<!-- payment and amount end -->
					</view>
					
					<!-- goods begin -->
					<list-cell :hover="false" padding="50rpx 30rpx">
						<view class="w-100 d-flex flex-column position-relative" style="margin-bottom: -40rpx;">
							<view class="w-100 d-flex align-items-center mb-40"
								v-for="(good, index) in order.snapshot.products" :key="index">
								<view class="d-flex flex-column w-60 overflow-hidden">
									<view class="font-size-lg text-color-base mb-10 text-truncate">
										{{ good.product_name }}
									</view>
									<view class="font-size-sm text-color-assist text-truncate">
										{{ extraproperties(good) }}
									</view>
								</view>
								<view class="d-flex w-40 align-items-center justify-content-between pl-30">
									<view class="font-size-base text-color-base">x{{ good.quantity }}</view>
									<view class="font-size-base text-color-base font-weight-bold">
										￥{{( good.price/100).toFixed(2) }}</view>
								</view>
							</view>
						</view>
					</list-cell>
					<!-- goods end -->
				</view>
				<view class="section">
					<!-- payment and amount begin -->
					<list-cell :hover="false" padding="50rpx 30rpx">
						<view class="w-100 d-flex flex-column">
							<view class="pay-cell">
								<view>支付方式</view>
								<view class="font-weight-bold">{{ order.pay_method }}</view>
							</view>
							<view class="pay-cell">
								<view>金额总计</view>
								<view class="font-weight-bold">￥{{ (order.pay_price/100).toFixed(2) }}</view>
							</view>
						</view>
					</list-cell>
					<!-- payment and amount end -->
				</view>
				<view class="section">
					<!-- order info begin -->
					<list-cell :hover="false" padding="50rpx 30rpx">
						<view class="w-100 d-flex flex-column">
							<view class="pay-cell">
								<view>下单时间</view>
								<view class="font-weight-bold">{{$u.timeFormat(order.create_time, 'yyyy年mm月dd日') }}</view>
								<!-- <view class="font-weight-bold">{{ $util.formatDateTime(order.created_at) }}</view> -->
							</view>
							<view class="pay-cell">
								<view>下单门店</view>
								<view class="font-weight-bold">{{ order.shop_name }}</view>
							</view>
							<view class="pay-cell">
								<view>支付方式</view>
								<view class="font-weight-bold">{{ order.pay_method }}</view>
							</view>
							<view class="pay-cell">
								<view>订单号</view>
								<view class="font-weight-bold" style="font-size: 24rpx; font-weight: 400;">
									{{ order.out_trade_no }}
								</view>
							</view>
						</view>
					</list-cell>
					<!-- order info end -->
				</view>
				<!-- order other info begin -->
				<list-cell :hover="false" padding="50rpx 30rpx 20rpx" last>
					<view class="w-100 d-flex flex-column">
						<view class="pay-cell">
							<view>取单号</view>
							<view class="font-weight-bold">{{ order.pickup_no }}</view>
						</view>
						<view class="pay-cell">
							<view>享用方式</view>
							<view class="font-weight-bold">自取</view>
						</view>
						<view class="pay-cell">
							<view>取餐时间</view>
							<view class="font-weight-bold">立即取餐</view>
						</view>
						<!-- <view class="pay-cell">
							<view>完成制作时间</view>
							<view class="font-weight-bold">{{ order.productioned_time }}</view>
						</view> -->
						<view class="pay-cell">
							<view>备注</view>
							<view class="font-weight-bold">{{ order.tip }}</view>
						</view>
					</view>
				</list-cell>
				<!-- order other info end -->
			</view>
			<!-- <view class="position-relative w-100">
				<image src="/static/images/order/bottom.png" mode="widthFix" class="w-100"></image>
				<view class="invote-box" v-if="!order.invoice_status">
					<view class="font-size-base text-color-primary" @tap="goToInvoice">去开发票</view>
					<image src="/static/images/order/right.png"></image>
				</view>
			</view> -->
		</view>
		<!-- <view class="btn-box">
			<view class="item" v-if="order.invoice_status > 0"><button type="primary">查看发票</button></view>
			<view class="item"><button type="primary" plain @tap="review">去评价</button></view>
			<view class="item"><button type="primary">再来一单</button></view>
		</view> -->
		<view class="btn-box" v-if="order.remaining && order.remaining>0">
			<view class="item">待支付{{(order.pay_price/100).toFixed(2)}}</view>
			<view class="item"><button type="primary" plain @click="cancle">取消订单</button></view>
			<view class="item"><button type="primary" @click="goPay">去支付</button></view>
		</view>
	</view>
</template>

<script>
	import listCell from '@/components/list-cell/list-cell';
	import {
		mapMutations,
		mapGetters
	} from 'vuex'
	export default {
		components: {
			listCell
		},
		data() {
			return {
				order: [],
				order_no: '',
				flag:false
			};
		},
		onLoad(e) {
			console.log(e);
			this.order_no = e.order_no
			if(e.ispay){
				this.flag = true
			}
			console.log(this.order_no);
		},
		onShow() {
			if(this.isLogin){
				this.getDetail()
			}else{
				uni.showToast({
					title: '还没登录呢~',
					icon: 'none',
					duration: 1000,
					complete: () => {
						setTimeout(() => {
							uni.navigateTo({
								url:'/pages/Login/index'
							})
						}, 1000);
					}
				});
			}
		},
		computed:{
			...mapGetters(['isLogin']),
		},
		methods: {
			...mapMutations(['clear_cart']),
			goLetter(){
				uni.navigateTo({
					url:"/goods/letter/letter"
				})
			},
			timeEnd(e) {
				console.log(e);
				if (e < 1) {
					this.order.remaining = 0
					this.cancleed()
					this.$forceUpdate()
				}
			},
			async cancleed() {
				let res = await this.apiPost('/order/cancel', {
					order_no: this.order_no
				})
				console.log(res);
				if (res.data.code == 1) {

				} else {
					this.msg(res.data.msg)
				}
			},
			async cancle() {
				let res = await this.apiPost('/order/cancel', {
					order_no: this.order_no
				})
				console.log(res);
				if (res.data.code == 1) {
					uni.showToast({
						title: '取消订单成功!',
						icon: 'none',
						duration: 1000,
						complete: (res1) => {
							console.log(res1, 222);    
							setTimeout(() => {
								uni.redirectTo({
									url: '/goods/order/orderDetail?order_no=' + this.order
										.out_trade_no
								})
							}, 1000);
						}
					});
				} else {
					this.msg(res.data.msg)
				}
			},
			async goPay() {
				uni.showLoading({
					title: "支付中"
				})
				let res = await this.apiPost('/order/pay', {
					out_trade_no: this.order.out_trade_no
				})
				console.log(res);
				if (res.data.code == 1) {
					uni.requestPayment({
						provider: 'wxpay',
						timeStamp: res.data.data[0].timeStamp,
						nonceStr: res.data.data[0].nonceStr,
						package: res.data.data[0].package,
						signType: res.data.data[0].signType,
						paySign: res.data.data[0].paySign,
						success: (reswx) => {
							console.log(reswx.out_trade_no, 999);
							console.log('success:' + JSON.stringify(reswx), 6666);
							uni.showToast({
								title: '支付成功!',
								icon: 'none',
								duration: 1500,
								complete: (res1) => {
									this.clear_cart()
									console.log(res1, 222);
									setTimeout(() => {
										uni.redirectTo({
											url: '/goods/order/orderDetail?order_no=' +	this.order.out_trade_no+'&ispay=true'
										})
									}, 1500);
								}
							});
						},
						fail: (e) => {
							console.log('fail:' + JSON.stringify(e));
							this.msg('支付失败');
						}
					});
				} else {
					this.msg(res.data.msg)
				}
				uni.hideLoading()
			},
			extraproperties(e) {
				let str = ''
				str = e.cups_name
				e.extraproperties.forEach(item => {
					if (item.name != 'toppings') {
						str = str + ';' + item.options.name
					} else {
						item.options.forEach(it => {
							str = str + ';' + it.name + '*' + it.toppings_quantity
						})
					}
				})
				return str
			},
			async getDetail() {
				uni.showLoading({
					title: '加载中'
				})
				let res = await this.apiPost('/order/detail', {
					order_no: this.order_no
				})
				if (res.data.code == 1) {
					this.order = res.data.data
					if (this.order.status == "未支付") {
						let now = Date.now()
						let old = new Date(this.order.create_time).getTime()
						console.log(now - old, 9090);
						let date = 300 - (now - old) / 1000
						if (date > 0) {
							this.order.remaining = date
						} else {
							this.order.remaining = 0
						}
					}
					if(this.order.status == "已支付"){
						this.flag = true
					}
					console.log(this.order);
				} else {
					uni.showToast({
						title: res.data.msg,
						icon: 'none',
						duration: 1000,
						complete: () => {
							setTimeout(() => {
								uni.navigateBack()
							}, 1000);
						}
					});
					
				}
				uni.hideLoading()
			},
			review() {
				// const date = this.order.completed_time.split(' ')[0]
				// uni.navigateTo({
				// 	url: '/pages/review/review?storename=' + this.order.store.name + '&typeCate=' + this.order.typeCate + '&date=' + date
				// })
			},
			goToInvoice() {
				// uni.navigateTo({
				// 	url: '/pages/invoice/invoice'
				// })
			}
		}
	};
</script>

<style lang="scss" scoped>
	@mixin arch {
		content: "";
		position: absolute;
		background-color: $bg-color;
		width: 30rpx;
		height: 30rpx;
		bottom: -15rpx;
		z-index: 10;
		border-radius: 100%;
	}

	.section {
		position: relative;

		&::before {
			@include arch;
			left: -15rpx;
		}

		&::after {
			@include arch;
			right: -15rpx;
		}
	}

	.sort-num {
		font-size: 64rpx;
		font-weight: bold;
		color: $text-color-base;
		line-height: 2;
	}

	.pay-cell {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: $font-size-base;
		color: $text-color-base;
		margin-bottom: 40rpx;

		&:nth-last-child(1) {
			margin-bottom: 0;
		}
	}

	.invote-box {
		position: absolute;
		width: 100%;
		left: 0;
		top: 0;
		display: flex;
		justify-content: center;
		align-items: center;

		image {
			width: 30rpx;
			height: 30rpx;
		}
	}

	.btn-box {
		background-color: #ffffff;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 120rpx;
		box-shadow: 0 0 20rpx rgba($color: #000000, $alpha: 0.1);
		display: flex;
		align-items: center;
		justify-content: space-evenly;
		z-index: 11;

		.item {
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 20rpx 10rpx;
			flex: 1;
			flex-shrink: 0;

			button {
				width: 100%;
				border-radius: 50rem !important;
				height: 80rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 0;
			}
		}
	}
</style>